<!DOCTYPE html>
<style>
  .block {
    font-family: Ahem;
    font-size: 20px;
    width: 200px;
    height: 100px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
  }
</style>
<div>
  <div class="block" style="color: #a00;">
    Red on white
  </div>
  <div class="block" style="color: #0a0;">
    Green on white
  </div>
  <div class="block" style="color: #00a;">
    Blue on white
  </div>
</div>
<div>
  <div class="block" style="color: #f99; background-color: #000;">
    Red on black
  </div>
  <div class="block" style="color: #9f9; background-color: #000;">
    Green on black
  </div>
  <div class="block" style="color: #99f; background-color: #000;">
    Blue on black
  </div>
</div>
<div>
  <div class="block" style="color: #000; background-color: #fdd;">
    Black on red
  </div>
  <div class="block" style="color: #000; background-color: #dfd;">
    Black on green
  </div>
  <div class="block" style="color: #000; background-color: #ddf;">
    Black on blue
  </div>
</div>
<div>
  <div class="block" style="color: #fff; background-color: #600;">
    White on red
  </div>
  <div class="block" style="color: #fff; background-color: #060;">
    White on green
  </div>
  <div class="block" style="color: #fff; background-color: #006;">
    White on blue
  </div>
</div>
